<template>
    <nav>
      <div class="sub-nav">
        <ul>
            <li v-for="(item,index) in subNavTitle" 
            :key="index" @click="changeIndex(item.url)" 
            :style="activeUrl === item.url && 'backgroundColor:#9B0909'">
            {{ item.title }}
            </li>
        </ul>
      </div>
    </nav>
</template>

<script>
    export default {
        props : {
                    subNavTitle : {
                        type : Array,
                        default:[],
                        require:true
                    },
                    activeUrl : {
                        type : String,
                        default : '',
                        require : true
                    }
                 },
        methods:{
            changeIndex(url){
               this.$emit('activeHandler',url)
            }
        }
    }
</script>

<style lang="scss" scoped>
   nav{
    height: 35px;
    box-sizing: border-box;
    background-color: #C20C0C;
    border-bottom: 1px solid #a40011;
    .sub-nav{
        width: 1100px;
        height: 34px;
        margin: 0 auto;
        ul{
            margin-left: 200px;
            font-size: 12px;
            display: flex;
            li{
                text-align: center;
                height: 20px;
                padding: 0 13px;
                margin: 7px 17px 0;
                border-radius: 20px;
                line-height: 20px;
                color: #fff;
                cursor: pointer;
                &:hover{
                    background: #9B0909;
                }
            }
        }
    }
   }
</style>